<template>
  <div class="detail-footer">
    <van-action-bar>
      <van-action-bar-icon icon="shop-o" text="店铺" color="#DF3F27" />
      <van-action-bar-icon icon="chat-o" text="客服" badge="" />
      <van-action-bar-icon icon="cart-o" text="购物车" badge="" style="margin-right: 10px" />

      <van-button round type="success" color="#DE3A26" @click="show = true">加入购物车</van-button>
      <van-button round type="success" color="#F6CA47" @click="onAAA()">立即购买</van-button>
    </van-action-bar>
    <van-action-sheet v-model:show="show">
      <div class="main">
        <div class="main-content">
          <div class="piece">
            <h4>颜色</h4>
            <span>没有颜色</span>
          </div>
          <div class="piece">
            <h4>数量</h4>
            <span>所有商品限购{{ renderlist.buymax }}个</span>
            <van-stepper v-model="value" step="1" min="1" :max="renderlist.buymax" />
          </div>
          <div class="piece">
            <h4>保修</h4>
            <span>没有保修</span>
          </div>
        </div>
        <div class="main-footer">
          <van-button
            type="primary"
            block
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            size="large"
            @click="onClick"
            >确认
          </van-button>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import { useCarStore } from '@/stores/car'
import { useContentStore } from '@/stores/content'

//点击跳商品详情
function onAAA() {
  // console.log(item)
  router.push(`/orders/id=${props.id}`)
}


//content仓库拿token
const contentstore = useContentStore()
//car仓库拿数据
const carStore = useCarStore()
//token
const token = computed(() => {
  return contentstore.token
})

//props
const props = defineProps(['list','id'])

//拿出数据
const renderlist = computed(() => {
  if (props.list) {
    return props.list[0]
  }
  return
})


//购物车显示弹窗
const show = ref(false)
//数量
const value = ref(1)

//点击加入购物车确认按键
function onClick() {
  //当条准备添加的数据
  const newList = ref([{ goodsId: renderlist.value.id, number: '' + value.value }])

  //提交 添加新数据
  //判断本地是否存在数据  PS:  Easy Mock存储不了数据，本地模拟接口  //暂未使用
  const storage = localStorage.getItem('car')

  if (storage) {
    console.log(carStore.carContent.value)
    carStore.carContent.value = [...newList.value, ...JSON.parse(storage)]
    return
  }
  //本地无数据 调用 接口
  carStore.renewCarContent(token.value as string, newList.value)

  //跳路由
  router.push({ name: 'cart' })
}
</script>

<style scoped>
.van-button {
  width: 104px;
  height: 38px;
  border-radius: 21px;
  font-size: 13px;
  font-weight: bold;
  margin: 2px 5px 0 0;
}

.main {
  height: 473px;
  width: 100%;
}
.main-content {
  height: 426px;
  padding: 14px;
  box-sizing: border-box;
}

.piece {
  height: 80px;
  padding-bottom: 20px;
}
.piece h4 {
  font-size: 20px;
}
.piece > span {
  display: block;
  padding-left: 30px;
  padding-bottom: 10px;
  font-size: 18px;
}
.piece > .van-stepper {
  position: relative;
  left: 250px;
}

.van-button[data-v-666eb0f3] {
  width: 70%;
  margin: 0 auto;
}
</style>
